<template>
    <el-dialog width="26vw" class="flex-dialog" v-model="info.visible" @close="handleClose"  >
        <template #header>
            <div style="font-size:var(--18FontSize); font-weight:500; color:#525866;">巡检对象模板</div>
        </template>
        <el-form class="flex-form" :model="form" :rules="rules" label-position="top">
            <el-form-item label="名称" prop="name">
                <FlexInput :data="{ paramKey:'name' }" :form="form" />
            </el-form-item>
            <el-form-item label="标签" prop="label">
                <FlexSelect :data="{ paramKey:'label', payload:global.labelList }" :form="form" />
            </el-form-item>
            <el-form-item v-if="form.label === 'meter' " label="关联设备类型">
                <FlexSelect :data="{ paramKey:'machType', payload:machList, hasSearch:true, searchType:'local' }" :form="form" @search="fetchMachTypeList" />
            </el-form-item>
            <el-form-item label="检查方式" prop="checkType">
                <el-radio-group v-model="form.checkType">
                    <el-radio value="1">
                        <template #default>
                            <div style="display:flex;align-items: center;">
                                <div style="margin-right:var(--sPadding);">循环抽查</div>
                                <el-input 
                                    style="margin-right:var(--sPadding);"
                                    :class="{ 
                                        'flex-input':true, 
                                        isError:errorMsg.isError && form.checkType === '1' , 
                                        notNum:errorMsg.errorType === 'notNum' && form.checkType === '1',
                                        notPosInt:errorMsg.errorType === 'notPosInt' && form.checkType === '1' 
                                    }"
                                    v-model="form.checkRatio" 
                                    @input="handleCheckNum" 
                                    @focus="()=>handleFocus('1')"
                                >
                                    <template #suffix>%</template>
                                </el-input>
                                <el-tooltip content="按比例随机抽查" effect="light"> <i class="ri-information-fill"></i></el-tooltip>
                            </div>
                        </template>
                    </el-radio>
                    <el-radio value="2">
                        <template #default>
                            <div style="display:flex; align-items: center;">
                                <div style="margin-right:var(--sPadding);">循环抽查</div>
                                <el-input 
                                    style="margin-right:var(--sPadding);"
                                    :class="{ 
                                        'flex-input':true, 
                                        isError:errorMsg.isError && form.checkType === '2', 
                                        notNum:errorMsg.errorType === 'notNum' && form.checkType === '2',
                                        notPosInt:errorMsg.errorType === 'notPosInt' && form.checkType === '2'
                                    }"
                                    v-model="form.circleCheckRatio" 
                                    @input="handleCheckNum" 
                                    @focus="()=>handleFocus('2')"
                                >
                                    <template #suffix>%</template>
                                </el-input>
                                <el-tooltip content="按比例从未检查或检查次数少的对象中循环抽查" effect="light"> <i class="ri-information-fill"></i></el-tooltip>
                            </div>
                        </template>
                    </el-radio>
                    <el-radio value="3">全部检查</el-radio>
                </el-radio-group>
            </el-form-item>
           
        </el-form>
        <template #footer>
            <div style="display:flex; gap:var(--mPadding); ">
                <div class="flex-btn middle opacity" style="flex:1;" @click="handleClose">取消</div>
                <div class="flex-btn middle" style="flex:1;" @click="handleSubmit">确认</div>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
    import { watch, ref, reactive, nextTick, onUnmounted } from 'vue';
    import { useGlobalStore } from '@/stores/global';
    import FlexInput from '@/components/FlexInput.vue';
    import FlexSelect from '@/components/FlexSelect.vue';
    const global = useGlobalStore();
    const props = defineProps({
        info:{ type:Object }
    });
    const emit = defineEmits(['update:info']);
    const machList = ref([]);
    const form = reactive({
        name:'',
        label:'',
        machType:'',
        checkType:'',
        checkRatio:null,
        circleCheckRatio:null,
    });
    // 标记内部控件的验证状态
    const errorMsg = ref({ isError:false, errorType:'' });
    const rules = reactive({
        name:[{ required:true, message:'名称不能为空',  trigger:'blur' }],
        label:[{ required:true, message:'请选择标签',  trigger:'blur' }],
        checkType:[{ required:true, message:'请选择检查方式',  trigger:'blur' }],
    });
    // 
    function handleFocus(val){
        form.checkType = val;
        // 聚焦时直接设置当前单选框组件的值
        nextTick(()=>{
            // 判断切换时，重新验证一遍，
            let _val = form.checkType === '1' ? form.checkRatio : form.circleCheckRatio;
            if ( _val ) {
                handleCheckNum(_val);
            }
        })
    }
    // 验证抽查比例
    function handleCheckNum(val){
        let _val = +val;
        if ( isNaN(val) ) {
            errorMsg.value = { isError:true, errorType:'notNum' };
            if ( form.checkType === '1') {
                form.checkRatio = null;
            }
            if ( form.checkType === '2') {
                form.circleCheckRatio = null;
            }
                      
            return;
        }
        if ( _val > 0 && _val <= 100 && Number.isInteger(_val) ) {
            errorMsg.value = { isError:false, errorType:'' };
        } else {
            errorMsg.value = { isError:true, errorType:'notPosInt' };
            if ( form.checkType === '1') {
                form.checkRatio = null
            }
            if ( form.checkType === '2') {
                form.circleCheckRatio = null;
            } 
        }
    }
    // 请求设备类型列表
    function fetchMachTypeList(obj){
        // console.log('fetch', obj);
        setTimeout(()=>{
            machList.value = [{ label:'电表', key:'ele'}, { label:'水表', key:'water'}, { label:'气表', key:'gas' }];
        }, 2000)
    }
    // 重置状态
    function handleClose(){
        Object.keys(form).forEach(key=>{
            form[key] = '';
        });
        errorMsg.value = { isError:false, errorType:'' };
        props.info.visible = false;
    }
    function handleSubmit(){
        
    }
   
    watch(()=>form.label, ()=>{
        if ( form.label === 'meter') {
            fetchMachTypeList();
        }
    })
    
</script>

<style lang="scss">
    .flex-form {
        .el-form-item {
            .el-radio-group {
                display:block;
                width:100%;
                .el-radio {
                    display:flex;
                    height:auto;
                    font-size:var(--baseFontSize);
                    padding:var(--mPadding);
                    width:100%;
                    border: 1px solid #E1E4EA;
                    margin-bottom:var(--sPadding);
                    border-radius:8px;
                    i.ri-information-fill {
                        color:#cacfd8;
                    }
                    .el-radio__input {
                        .el-radio__inner {
                            width:var(--baseFontSize);
                            height:var(--baseFontSize);
                        }
                    }
                    .el-radio__label {
                        font-size:var(--baseFontSize);
                        line-height:var(--baseFontSize);
                    }
                }
                .el-radio:hover {
                    border-color:#ced3db;
                }
                .el-radio.is-checked {
                    border-color:#409eff;
                }
            }
        }
    }
</style>